<template>
	<view style="padding-top: 50rpx;">
		<view class="button">
			<u-button icon="plus" @tap="showAdds" type="success" text="新增商品" size="large"></u-button>
		</view>
		<view class="list">
			<!-- :style="{'top':system.safeArea.top+5+'px'}" -->
			<view class="thead"  style="background: #fff; border-radius: 12rpx; box-shadow: 0 2rpx 8rpx #eee; padding: 24rpx; display: flex; align-items: center;">
				<view style="flex: 1; text-align: center;">
					<text style="font-weight: bold;">商户名</text>
				</view>
				<view style="flex: 1; text-align: center;">
					<text style="font-weight: bold;">未结算订单数</text>
				</view>
				<view style="flex: 1; text-align: center;">
					<text style="font-weight: bold;">创建时间</text>
				</view>
			</view>
			<u-empty mode="data" icon="data" v-show="goods==null || goods == ''">
			</u-empty>
			<view class="data">
				<u-swipe-action>
					<view v-for="item in goods" :key="item.id" style="border-top: 1rpx solid rgb(214, 215, 217);padding: 20rpx 0;background-color: #fff;">
						<u-swipe-action-item :options="[
				      { text: '删除', style: { background: '#dd524d', color: '#fff' } }
				    ]" @click="handleAction($event, item)">
							<view style="background: #fff; border-radius: 12rpx; box-shadow: 0 2rpx 8rpx #eee; padding: 24rpx; display: flex; align-items: center;">
								<view style="flex: 1; text-align: center;">
									<text style="font-weight: bold;">{{ item.name }}</text>
								</view>
								<view style="flex: 1; text-align: center;">
									<text>{{ item.settlementOrder }}</text>
								</view>
								<view style="flex: 1; text-align: center;">
									<text>{{ item.createTime }}</text>
								</view>
							</view>
						</u-swipe-action-item>
					</view>
				</u-swipe-action>
			</view>
			
		</view>

		<u-popup :closeable="true" :close-on-click-overlay="true" @close="closeAdd" :show="showAdd" :round="10" mode="center" z-index="99" overlayStyle="z-index:90">
			<view class="" style="width: 500rpx;min-height: 100rpx;">
				<view class="title">{{title}}</view>
				<view class="content">
					<u--form labelPosition="left" :model="model" ref="uForm">
						<u-form-item label="商户名" prop="name" borderBottom>
							<u--input v-model="model.name" border="none" :disabled="flag == 1"></u--input>
						</u-form-item>
						<!-- <u-form-item label="价格" prop="price" borderBottom>
							<u--input type="number" v-model="model.price" border="none"></u--input>
						</u-form-item> -->
					</u--form>

					<view class="bottom">
						<view class="cancel" @tap.stop="closeAdd">取消</view>
						<view class="success" @tap.stop="handleSuccess">确认</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
	  getMerchantList,
	  addMerchant,
	  deleteMerchant
	} from '@/api/mine/merchant.js';
	const app = getApp()
	import {parseDate} from '@/utils/utils.js'
	export default {
	  data() {
	    return {
	      showAdd: false,
	      goods: null,
		  title:'添加商户',
		  model:{
			  name:null
		  },
		  flag:0,
		  system:app.globalData.system
	    }
	  },
	  created() {
	    this.getList()
	  },
	  methods: {
	    async getList() {
	      const res = await getMerchantList({type:1})
		  res.rows.forEach(item=>{
			  item.createTime = parseDate(new Date(item.createTime));
		  })
	      this.goods = res.rows
	      console.log(res)
	    },
		showAdds(){
			this.showAdd = true
		},
		closeAdd(){
			this.model = {
				name:null
			}
			this.showAdd = false
		},
		handleAction({index},item){
			this.delGoods(item)
		},
		async handleSuccess(){
			const res = await addMerchant(this.model)
			this.$modal.msg(res.msg);
			this.closeAdd()
			this.getList()
		},
		async delGoods(item){
			const flag = await this.$modal.confirm("，是否删除此商户?");
			if(!flag) return false;
			const res = await deleteMerchant(item.id)
			this.$modal.msg(res.msg)
			this.getList()
		}
	  }
	}
</script>

<style scoped>
	.content {
	  padding: 0 20rpx;
	}
::v-deep .u-form-item__body__left {
	  width: 50% !important;
	}
	.button{
		/* margin-top: 50rpx; */
	}
	.list{
		margin-top: 50rpx;
		
	}
	.data{
		/* height: 1200rpx;
		overflow: scroll; */
		margin-bottom: 50rpx;
	}
	.thead{
		position: sticky;
		left: 0;
		top: 0;
		z-index: 10076;
	}
</style>